<template>
    <div class="common-table">
        <el-table :data="tableData" border stripe height="90%" v-loading="config.loading">
            <el-table-column show-overflow-tooltip v-for="v in tableLabel" :key="v.prop" :label="v.label">
                <template slot-scope="scope">
                    <div v-html="scope.row[v.prop]"></div>
                </template>
            </el-table-column>
            <el-table-column label="操作">
               <template slot-scope="scope">
                    <el-button size="mini" type="info" @click="info(scope.row)" v-if="config.editHandle">详情</el-button>
                    <el-button size="mini" @click="edit(scope.row)" v-if="config.editHandle">编辑</el-button>
                    <el-button size="mini" type="danger" @click="del(scope.row)" v-if="config.delHandle">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                class="pager"
                @size-change="sizeChange"
                @current-change="currentChange"
                :page-sizes="[20, 40, 60, 80, 100]"
                background
                layout="total, sizes, prev, pager, next, jumper"
                :current-page.sync="config.page"
                :page-size.sync="config.size"
                :total="config.total">
        </el-pagination>
    </div>
</template>

<script>
    export default {
        props: {
            tableData: Array,
            tableLabel: Array,
            config: Object
        },
        methods: {
            info(row) {
                this.$emit('info', row)
            },
            edit(row) {
                this.$emit('edit', row)
            },
            del(row) {
                this.$emit('del', row)
            },
            sizeChange(page) {
                this.$emit('sizeChange', page)
            },
            currentChange(page) {
                this.$emit('currentChange', page);
            }
        }
    }
</script>

<style lang="scss" scoped>
    .common-table {
        height: 68vh;
        background-color: #fff;
        position: relative;
        .pager {
            position: absolute;
            margin-top: 8px;
            right: 20px;
        }
    }
</style>
